<template>
	<view>
		<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
					<block slot="backText">返回</block>
					<block slot="content">SHOW TIME</block>
					<block slot="right">
						<view class='cu-btn bg-green sm block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
							筛选
						</view>
						<!-- <u-icon @click="goFabu" style="padding-right: 20rpx;" label="发布" size="40" name="plus" label-color='#fff' label-size='20'></u-icon> -->
					</block>
			</cu-custom>
		
		<!-- 	<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
				打开抽屉
			</view> -->
		<!-- <view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 案例类卡片
			</view>
			<view class="action">
				<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
			</view>
			
			
		</view> -->
	<!-- 	<u-tabs  :list="[{name:'图文'},{name:'视频'}]" :is-scroll="false" :current="current" @change="changeType"></u-tabs> -->
		
			
		
			<view class="cu-card case" :class="isCard?'no-card':''" v-for="(item,i) in list" :key='i' @click="goDetail(item)" style="">
				<view class="cu-item shadow" v-if="item.isPublic==1||(item.isPublic==0&&item.included==true)">
					<view class="image">
						<!-- <image :src="item.img"
						 mode="widthFix"></image> -->
						  <u-lazy-load :image="item.imgList[0]" :loading-img="item.loadingImg" :error-img="item.loadingImg" duration="1000" height="400px" img-mode='aspectFill'></u-lazy-load>
						<!-- <u-lazy-load :image="item.imgList[0]" :loading-img="item.loadingImg" :error-img="item.loadingImg" duration="1000" height="225px"></u-lazy-load> -->
						<view class="cu-tag" :class="item.classfy==1?'bg-blue':'bg-cyan'">{{item.classfyLabel}}</view>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="`background-image:url(${item.user_id[0].avatar});`"></view>
							<view class="content flex-sub">
								<view class="text-grey">{{item.user_id[0].nickName}}</view>
								<view class="text-gray text-sm flex justify-between">
									{{item.publish_dateTime | filterTime}}
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.watchCount}}
										<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.zan}}
										<text v-if="item.canComment" class="cuIcon-messagefill margin-lr-xs"></text> {{item.canComment?item.commentTotal:''}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		</scroll-view>
		
		<!-- <u-loadmore :status="status" /> -->
		<!-- 加载loading -->
		<view class="cu-load load-modal" v-if="jiazai">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/loading.png" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
		<view class="" v-if="!jiazai&&list.length==0&&!modalName" style="margin-top: 200px;z-index: 999;position: absolute;top: 30%;left:40%;">
			没有数据~
		</view>
		<!-- <u-empty style="margin-top: 200px;z-index: 999;" text="没有数据,发布一条吧~" mode="data" :show='true' v-if="!jiazai&&list.length==0">123</u-empty> -->
		<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
			<text class="cuIcon-pullright"></text>
		</view>
		<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
			<view class="classBox">
				<view class="classBox-t">
					筛选条件
				</view>
				<view class="classPart">
					<u-button :ripple="true" size="mini" @click="curClassFun(-1)" :type="curClass==-1?'primary':''">全部</u-button>
					<u-button :ripple="true" size="mini" @click="curClassFun(1)" :type="curClass==1?'primary':''">当下</u-button>
					<u-button :ripple="true" size="mini" @click="curClassFun(2)" :type="curClass==2?'primary':''">过往</u-button>
					
				</view>
				<view class="classPart2" v-if="curClass==2">
					<u-button @click="showDateSel = true">选择过往记忆时间段</u-button>
					<view class="" style="line-height: 80rpx;">
						筛选记忆范围：{{selDate1}}
					</view>
					<u-calendar v-model="showDateSel" mode="range" @change="changeDate1"></u-calendar>
					
				</view>
				<view class="classPart2">
					<u-button @click="showDateSel2 = true">选择发布日期</u-button>
					<view class="" style="line-height: 80rpx;">
						发布日期：{{selDate}}
					</view>
					<u-calendar v-model="showDateSel2" mode="date" @change="changeDate"></u-calendar>
					
				</view>
				<view class="bottom">
					<u-button :ripple="true" size="medium"  type="primary" @click="sureSel">确定</u-button>
					<u-button :ripple="true" size="medium"  @click="cancelSel">取消</u-button>
				</view>
			</view>
			
			<!-- <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
				
				<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
					<view class="content">
						<text class="cuIcon-github text-grey"></text>
						<text class="text-grey">{{index +1}}</text>
					</view>
				</view>
			</view> -->
			
		</scroll-view>
		
	</view>
</template>

<script>
	import {
		timeTo
	} from '@/common/utils.js'
	import {
		getMemoryList
	} from '@/common/api.js'
	export default {
		
		data() {
			return {
				showDateSel: false,
				showDateSel2: false,
				selDate1:'',//过往时间段
				selDate:'',//创建日期
				curClass:-1,
				modalName:null,
				jiazai:true,
				status:'loading',//loading / nomore
				isCard: false,
				current:0,
				list:[
					// {
					// 	img:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
					// 	loadingImg:'/static/logo.png',
					// 	errorImg:'/static/logo.png',
					// 	text:'我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。',
					// 	headImg:"https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg",
					// 	name:"正义天使",
					// 	time:"十天前",
					// 	watch:'10',
					// 	zan:'20',
					// 	comment:'30'
					// },
				]
			};
		},
		filters:{
			filterTime(v){
				return timeTo(v)
			}
		},
		onShow() {
			this.getList()
			
		},
		methods: {
			getList(){
				let user_id =uni.getStorageSync('user_id')?uni.getStorageSync('user_id'):''
				getMemoryList({
					user_id:user_id,
					type:this.curClass,//-1全部0当下1过往
					selDate:this.selDate,//发布日期
					selDateRang:this.selDate1//过往记忆日期
				}).then(res=>{
					console.log(this.curClass,this.selDate,res,'11')
					if(res.success){
						this.jiazai=false
						let resData = res.result.data;
						resData.map((item)=>{
							item.loadingImg='/static/loadingImg.png'
							item.headImg="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg",
							item.watch = 10,
							item.zan=10,
							item.comment=30
							item.name='www'
						})
						this.list = resData
					}
				})
			},
			IsCard(e) {
				this.isCard = e.detail.value
			},
			curClassFun(i){
				this.curClass=i
			},
			sureSel(){
				this.hideModal()
				console.log(this.curClass,this.selDate,this.selDate1)
				this.getList()
			},
			cancelSel(){
				this.hideModal()
			},
			changeDate1(e){
				console.log(e)
				this.selDate1 = e.startDate+'至'+e.endDate
			},
			changeDate(e){
				console.log(e)
				this.selDate = e.result
			},
			goDetail(item){
				uni.navigateTo({
					url:`/pages/ILoveU/detail?memoryId=${item._id}`
				})
			},
			goFabu(){
				console.log(1)
				uni.navigateTo({
					url:'/pages/ILoveU/publish'
				})
			},
			changeType(index) {
				this.current = index;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-image: var(--gradualBlue);
		width: 100vw;
		overflow: hidden;
	}
	.classBox{
		padding: 40rpx;
		height: 100%;
		position: relative;
		.classBox-t{
			line-height: 60rpx;
		}
		.classPart{
			margin: 20rpx 0;
			uni-button{
				margin-right: 20rpx;
			}
		}
		.bottom{
			position: absolute;
			bottom: 0;
			uni-button{
				margin-right: 60rpx;
			}
			
		}
	}
	.DrawerPage {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0vw;
		background-color: #f1f1f1;
		transition: all 0.4s;
	}

	.DrawerPage.show {
		transform: scale(0.9, 0.9);
		left: 85vw;
		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
		transform-origin: 0;
	}

	.DrawerWindow {
		position: absolute;
		width: 85vw;
		height: 100vh;
		left: 0;
		top: 0;
		transform: scale(0.9, 0.9) translateX(-100%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
		padding: 100upx 0;
	}

	.DrawerWindow.show {
		transform: scale(1, 1) translateX(0%);
		opacity: 1;
		pointer-events: all;
	}

	.DrawerClose {
		position: absolute;
		width: 40vw;
		height: 100vh;
		right: 0;
		top: 0;
		color: transparent;
		padding-bottom: 30upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
		letter-spacing: 5px;
		font-size: 50upx;
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
	}

	.DrawerClose.show {
		opacity: 1;
		pointer-events: all;
		width: 15vw;
		color: #fff;
	}

	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
		width: 64upx;
		height: 64upx;
		line-height: 64upx;
		margin: 0;
		display: inline-block;
	}

	.DrawerPage .cu-bar.tabbar .action .cu-avatar {
		margin: 0;
	}

	.DrawerPage .nav {
		flex: 1;
	}

	.DrawerPage .nav .cu-item.cur {
		border-bottom: 0;
		position: relative;
	}

	.DrawerPage .nav .cu-item.cur::after {
		content: "";
		width: 10upx;
		height: 10upx;
		background-color: currentColor;
		position: absolute;
		bottom: 10upx;
		border-radius: 10upx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.DrawerPage .cu-bar.tabbar .action {
		flex: initial;
	}
</style>

